<template>
    <div class="iframe">
        <div class="i-title">
            <h3>图片优化</h3>
        </div>
        <div class="i-tip">
            <el-tabs v-model="data.activeName" class="demo-tabs">
                <el-tab-pane label="正常" name="first">
                    <el-image fit="contain" :src="data.a" />
                    <img fit="contain" :src="data.a" />
                    <div>
                        <el-button @click="changeImg(0)">异常</el-button>
                    </div>
                </el-tab-pane>
                <el-tab-pane label="优化" name="second">
                    <el-image @error="handlerErr(1)" fit="contain" :src="data.b" />
                    <img @error="handlerErr(1)" fit="contain" :src="data.b" />
                    <div>
                        <el-button @click="changeImg(1)">异常</el-button>
                    </div>
                </el-tab-pane>
            </el-tabs>
        </div>
    </div>
</template>
<script>
import { reactive } from 'vue'
import a from '@/assets/images/a.png';
import b from '@/assets/images/b.png';
import error from '@/assets/images/error.png'
export default {
    setup() {
        let data = reactive({
            activeName: 'first',
            a: a,
            b: b,
            error: error
        })
        let changeImg = (v) => {
            if (v == 0) {
                data.a = ""
            }
            else if (v == 1) {
                data.b = ""
            }
        }
        let handlerErr = (t) => {
            if (t == 1) {
                data.b = data.error;
            }
        }
        return {
            data,
            changeImg,
            handlerErr
        }
    }
}
</script>
<style scoped>
img,
.el-image {
    width: 300px;
    height: 200px;
    border: solid 1px #eee;
    margin-right: 20px;
}
</style>